<template>
  <el-container>
    <el-row>
      <router-title></router-title>
      <el-col :span="24">
        <table-list :tableData="students" :tableConfig="tableConfig" :tableHandle="tableHandle" v-on:handleClick="handleClick" >
        </table-list>
      </el-col>

      <el-col :span="24">
        <div class="block text-right">
          <el-pagination
            layout="prev, pager, next"
            v-on:current-change="handlePage"
            :total="1000">
          </el-pagination>
        </div>

      </el-col>
    </el-row>
  </el-container>
</template>

<style>
  .text-right {
    margin-top: 12px;
    text-align: right;
  }

</style>

<script>
  import Header from './common/header';
  import List from './common/list';
  import Title from './common/title';

  const tableConfig = [
    {
      prop: 'name',
      label: '姓名'
    },
    {
      prop: 'class',
      label: '班级'
    },
    {
      prop: 'teacher',
      label: '授课老师'
    }
  ]
  const tableHandle = {
    label: '操作',
    handle: [
      {
        text: '查看',
        type: 'check',
        callback: 'handleClick'
      },
      {
        text: '编辑',
        type: 'edit',
        callback: 'handleClick'
      },
      {
        text: '删除',
        type: 'remove',
        callback: 'handleClick'
      },
    ]
  }

  export default {
    data() {
      return {
        students: [],
        tableConfig,
        tableHandle,
        page: 1
      }
    },
    methods: {
      handleClick(data) {
        const handleFunc = this['handle' + data.type.charAt(0).toUpperCase() + data.type.slice(1)];
        handleFunc && handleFunc.call(this, data.item);
      },
      handlePage(page) {
        
      },
      handleCheck(student) {
        this.$router.push({ 
          path: 'student_edit',
          query: {id: student.id}
        })
      },
      getList(skip) {
        ajax({
          url: '/student',
          data:{
            page: this.page
          }
        }).then(res => {
          console.log(res)
          if (res.data.code === 200) {
            this.students = res.data.data;
            this.page += skip;
          }
        })
      }
    },
    mounted() {
      this.getList(0);
    },
    components: {
      'admin-header': Header,
      'table-list': List,
      'router-title': Title
    }
  }
</script>